<%--
  Created by IntelliJ IDEA.
  User: 林允
  Date: 2023/4/1
  Time: 14:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">

    <title>找回密码</title>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div class="content" id="app">
    <h3>找回密码</h3>
    <form id="form0" name="form0" AUTOCOMPLETE="OFF" style="margin-left: 60px">
        <table>
            <tr height="35px">
                <td style="color: black"><span style="font-weight: bold">收件邮箱：</span></td>
                <td>
                    <el-input type="text" name="email" v-model="email" id="email" placeholder="输入邮箱" ></el-input>
                </td>
                <td style="color: black">
                    <el-button type="info" id="btnGetVcode" style="cursor:pointer" @click="getVcode" plain>获取验证码</el-button>
                </td>
            </tr>
            <tr height="35px">
                <td ><span style="font-weight: bold">验证码：</span></td>
                <td>
                    <el-input type="text" name="vcode" v-model="vcode" id="vcode" placeholder="输入验证码"></el-input>
                </td>
                <td id="message"></td>
            </tr>
        </table>
        <a target="_self">
            <el-button id="btnVerify" @click="sure" style="cursor:pointer;width: 60px" plain>验证</el-button></a>
    </form>
</div>


<script>
    var time0 = 60;
    var time = time0;
    var t;  // 用于验证按钮的60s计时

    var v = new Vue({
        el : "#app",
        data: {
            email : "",
            vcode : ""
        },
        methods : {
            getVcode(){
                var btnGet = document.getElementById("btnGetVcode");
                btnGet.disabled = true;  // 为了防止多次点击
                var params = new URLSearchParams();
                params.append("email", this.email);
                axios.post('EmailServlet?method=getVCode',params).then(msg=>{
                    console.log(msg.data)
                    if(msg == -1){
                        this.$alert("请输入正确的邮箱！");
                        btnGet.disabled = false;
                    }
                    else{
                        useChangeBTN();  // 控制下一次重新获取验证码
                    }
                })
            },
            sure(){
                var params = new URLSearchParams();
                var message = document.getElementById("message");  // 显示提示信息
                params.append("vcode", this.vcode);
                params.append("email", this.email);
                axios.post('EmailServlet?method=verify', params).then(msg=>{
                    console.log(msg);
                    if(msg.data == 1){
                        message.innerHTML = "验证码正确！";
                        $("#message").css("color","green");
                        location.href="modify.html";
                    }
                    else{
                        message.innerHTML = "验证码错误！";
                        $("#message").css("color","red");
                    }
                })
            }
        }
    });



    //修改按钮，控制验证码重新获取
    function changeBTN(){
        if(time > 0){
            $("#btnGetVcode").text("("+time+"s)"+"重新获取");
            time = time - 1;
        }
        else{
            var btnGet = document.getElementById("btnGetVcode");
            btnGet.disabled = false;
            $("#btnGetVcode").text("获取验证码");
            clearInterval(t);
            time = time0;
        }
    }
    function useChangeBTN(){
        $("#btnGetVcode").text("("+time+"s)"+"重新获取");
        time = time - 1;
        t = setInterval("changeBTN()", 1000);  // 1s调用一次
    }
</script>
</body>
<style>
    html, body{
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
    }
    .content{
        text-align: center; /*让div内部文字居中*/
        border-radius: 20px;
        width: 500px;
        height: 350px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /*.content {*/
    /*    margin-left: 40%;*/
    /*    padding-top: 20%;*/
    /*}*/
    body {
        /* 加载背景图 */
        background-image: url("images/email.jpg");
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #464646;
    }

</style>
</html>

